<template>
  <div>
    <div class="table-container">
      <a-table :columns="columns" :data-source="projectAuths">
        <div slot="icons" slot-scope="text">
          <a-icon-font
            v-if="text"
            style="font-size: 16px;"
            type="iconyouquanxianlianjiechenggong"
          />
          <a-icon-font v-else style="font-size: 16px;" type="iconwuquanxian" />
        </div>
        <div
          v-if="record.role !== '管理员'"
          slot="actions"
          slot-scope="_, record"
        >
          <a-button
            v-if="record.key !== modifiedId"
            type="link"
            style="width: 88px;"
            class="action-button"
            @click="() => setModifiedId(record.key, record.role)"
            >修改成员角色</a-button
          >
          <a-button
            v-else
            type="link"
            style="width: 29px;"
            class="action-button"
            @click="updateRole"
            >确定</a-button
          >
          <a-divider type="vertical" />
          <a-button
            v-if="record.key !== modifiedId"
            type="link"
            style="width: 29px;"
            class="action-button"
            @click="() => setDeleteVisible(record.key)"
            >删除</a-button
          >
          <a-button
            v-else
            type="link"
            style="width: 29px;"
            class="action-button"
            @click="cancelRole"
            >取消</a-button
          >
        </div>
        <div slot="role" slot-scope="text, record">
          <span v-if="record.key !== modifiedId">{{ text }}</span>
          <a-select
            v-else
            size="small"
            :value="modifiedRole"
            @change="changeRole"
          >
            <a-select-option value="协作者">协作者</a-select-option>
            <!--            <a-select-option value="游客">游客</a-select-option> 暂时去掉游客角色-->
          </a-select>
        </div>
      </a-table>
    </div>
    <a-modal
      :visible="deleteVisible"
      ok-text="确定"
      cancel-text="取消"
      centered
      @ok.stop="deleteMember"
      @cancel.stop="cancelDelete"
    >
      <p>确定删除该成员吗？</p>
    </a-modal>
  </div>
</template>

<script lang="ts">
/**
 * auth table
 * show all members of project
 * @author Huihua Lu
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import ProjectStore from '@/store/modules/project'

@Component({})
export default class AuthHeader extends Vue {
  @Prop() projectId!: number

  private columns = [
    {
      title: '成员',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      scopedSlots: { customRender: 'role' },
      width: '220px',
    },
    {
      title: '查看',
      dataIndex: 'read',
      key: 'read',
      scopedSlots: { customRender: 'icons' },
    },
    {
      title: '编辑',
      dataIndex: 'edit',
      key: 'edit',
      scopedSlots: { customRender: 'icons' },
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      scopedSlots: { customRender: 'actions' },
    },
  ]

  // 删除成员
  private deleteVisible: boolean = false
  private deletedId: number | null = null

  // 修改权限
  private modifiedId: number | null = null
  private modifiedRole: string | null = null

  public async created(): Promise<void> {
    await ProjectStore.queryProjectAuth(this.projectId)
  }

  public get projectAuths(): Array<any> {
    if (!ProjectStore.projectAuth) {
      return []
    }
    return ProjectStore.projectAuth.map((auth) => {
      return {
        key: auth.id,
        name: auth.userName,
        role: auth.auth === 1 ? '游客' : auth.auth === 2 ? '协作者' : '管理员',
        read: true,
        edit: auth.auth !== 1,
      }
    })
  }

  /* 修改权限 */
  public setModifiedId(id: number, role: string): void {
    this.modifiedId = id
    this.modifiedRole = role
  }

  public changeRole(value: string): void {
    this.modifiedRole = value
  }

  public cancelRole(): void {
    this.modifiedId = null
    this.modifiedRole = null
  }

  public async updateRole(): Promise<void> {
    if (this.modifiedId !== null && this.modifiedRole !== null) {
      const authNumber =
        this.modifiedRole === '游客'
          ? 1
          : this.modifiedRole === '协作者'
          ? 2
          : 3
      await ProjectStore.updateAuth({ auth: authNumber, id: this.modifiedId })
      this.modifiedId = null
      this.modifiedRole = null
    }
  }

  /* 删除成员 */
  public setDeleteVisible(id: number): void {
    this.deleteVisible = true
    this.deletedId = id
  }

  public cancelDelete(): void {
    this.deleteVisible = false
  }

  public async deleteMember(): Promise<void> {
    await ProjectStore.deleteAuth(this.deletedId)
    this.deleteVisible = false
  }
}
</script>

<style lang="less">
@import '@/constants';

.table-container {
  background: #fff;
  font-size: @TEXT_FONT_SIZE;
  margin-top: 12px;
  padding: 24px 24px 9px;

  .ant-select {
    margin-left: -8px;
    margin-top: -2px;
  }
}

.action-button {
  height: 21px;
  padding: 0;
}

.action-button:hover {
  font-weight: bold;
}

.ant-select {
  width: 134px;

  [role='combobox'] {
    border-radius: 4px;
  }
}

// 表头行高
.ant-table-thead tr th {
  font-weight: bold;
  padding: 13px 16px;
}

// 表数据行高
.ant-table-tbody > tr > td {
  padding: 10px 16px;

  > div:first-child {
    height: 21px;
  }
}
</style>
